<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <!-- Bootstrap core CSS -->
  <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">
  <link href="__PUBLIC__/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
  <link href="__PUBLIC__/css/app.css" rel="stylesheet">
  
  
  
  <link rel="stylesheet" media="all" href="__PUBLIC__/plugins/jvectormap2.0.4/jquery-jvectormap.css"/>
  <!-- <script src="__PUBLIC__/plugins/jvectormap2.0.4/tests/assets/jquery-1.8.2.js"></script> -->
  <script src="__PUBLIC__/js/jquery.js"></script>
  <script src="__PUBLIC__/js/bootstrap.min.js"></script>
  
  <!-- SlimScroll -->
  <script src="__PUBLIC__/plugins/slimScroll/jquery.slimscroll.min.js"></script>
  
  <!-- <script src="__PUBLIC__/plugins/jvectormap2.0.4/jquery-jvectormap.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/lib/jquery-mousewheel.js"></script>

  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/jvectormap.js"></script>

  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/abstract-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/abstract-canvas-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/abstract-shape-element.js"></script>

  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/svg-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/svg-group-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/svg-canvas-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/svg-shape-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/svg-path-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/svg-circle-element.js"></script>

  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/vml-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/vml-group-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/vml-canvas-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/vml-shape-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/vml-path-element.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/vml-circle-element.js"></script>

  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/map-object.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/region.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/marker.js"></script>

  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/vector-canvas.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/simple-scale.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/numeric-scale.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/ordinal-scale.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/color-scale.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/data-series.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/proj.js"></script>
  <script src="__PUBLIC__/plugins/jvectormap2.0.4/src/map.js"></script>

  <script src="__PUBLIC__/plugins/jvectormap/jquery-jvectormap-us-aea-en.js"></script> -->
  
  <script src="__PUBLIC__/angular/vendor/jquery/jvectormap/jquery-jvectormap.min.js"></script>
  <script src="__PUBLIC__/angular/vendor/jquery/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
  <!-- <script src="__PUBLIC__/angular/vendor/jquery/jvectormap/jquery-jvectormap-us-aea-en.js"></script> -->
  <script src="__PUBLIC__/plugins/jvectormap/jquery-jvectormap-us-aea-en.js"></script>

  <script>
    $(function(){
	
	  $(".scrollable1").slimScroll({
		height:'110px',
		size: '5px', //组件宽度
		color: '#000', //滚动条颜色
		position: 'right', //组件位置：left/right
		distance: '0px', //组件与侧边之间的距离
		start: 'top', //默认滚动位置：top/bottom
		opacity: .5, //滚动条透明度
		alwaysVisible: true, //是否 始终显示组件
		disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
		railVisible: true, //是否 显示轨道
		railColor: '#333', //轨道颜色
		railOpacity: .2, //轨道透明度
		railDraggable: true, //是否 滚动条可拖动
		railClass: 'slimScrollRail', //轨道div类名 
		barClass: 'slimScrollBar', //滚动条div类名
		wrapperClass: 'slimScrollDiv', //外包div类名
		allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
		wheelStep: 20, //滚轮滚动量
		touchScrollStep: 200, //滚动量当用户使用手势
		borderRadius: '7px', //滚动条圆角
		railBorderRadius: '7px' //轨道圆角
	  });
	
      var map = $('#map1').vectorMap({
        map: 'us_aea_en',
          markers: [
			{latLng: [42.06, -110.53], name: '1US-分娩舍', offsets: [0, 2]},
            {latLng: [35.06, -108.53], name: '2US-配怀舍', offsets: [0, 2]}
            
          ],
          normalizeFunction: 'polynomial',
          backgroundColor: 'transparent',
          zoomMin: 0.4,
          regionsSelectable: true,
          markersSelectable: true,
          regionsSelectableOne: true,
          markersSelectableOne: false,
          focusOn: {
            x:0,
            y:0,
            scale: 1.0
          },
		  series: {
            markers: [{
              attribute: 'r',
              scale: [1, 10],
              values: [
                9.16,
                9.16
              ]
            }],
            regions:[{
              scale: {
                white: '#9faad3'
              },
              attribute: 'fill',
              values: {
                'US-VA':'white'
              }
            }]
        },
		regionStyle: {
            initial: {
              fill: '#b4edff',
              'fill-opacity': 0.4,
              stroke: '#FFF',
              'stroke-width': 1,
              'stroke-opacity': 1
            },
            hover: {
              fill: '#b4edff',
              'fill-opacity': 0.8
            },
            selected: {
              fill: '#b4edff'
            }
        },
		/*markerStyle: {
            initial: {
              fill: '#ffffff',
              stroke: '#fff',
              r: 10
            },
            hover: {
              stroke: '#fff'
            },
            selected: {
              fill: '#ff5500'
            }
        },*/
		markerStyle: {
		  initial: {
			fill: '#27c24c',
			stroke: '#27c24c'
		  },
		  selected: {
			  fill: '#27c24c'
		  }
		},
		onRegionOver: function(event, code){
            //alert(code);
			//ajax
			
        },
		onRegionClick: function(event, code){
			//alert(code);
            //jump
			code=code[0];
			if(isNaN(code)){
				select_rid=null;
				var htmlstr="";
				$('#id-status').html(htmlstr);
				$('#id-status-title').html('');
				$('#day').html('设备离线');
				$('#temp_avg').html('设备离线');
				$('#humi_r1').html('设备离线');
				$('#nh3_r').html('设备离线');
				$('#light_r').html('设备离线');
				$('#id-box').hide();
			}else{
				select_rid=code;
				$('#id-box').show();
				loadHouse(code);
				//var urlhouse='{:u('Index/house')}';
				//window.location.href= urlhouse+"?rid="+code;
			}
			
        },
		onRegionTipShow: function(event, label, code) {  
			//console.info(label,code);
			/*label.html(  
			"<big>" + label.html() + "</big>"+"<hr style='margin-top:3px;'>"+  
			"<p style='margin-top:5px;'></p>"  
			);*/  
        },  
		onMarkerTipShow: function(event, label, code) {  
			//console.info(event);
			label.html(  
			"<big>" + label.html() + "</big>"+"<hr style='margin-top:3px;'>"+  
			"<p style='margin-top:5px;'></p>"  
			);  
        },  
		onMarkerSelected:function(e, code, isSelected, selectedMarkers){
			//console.info(e, code, isSelected, selectedMarkers);
		},
		labels: {
            regions: {
              render: function(code){
                var doNotShow = ['US-VA','US-ND','US-NM','US-VT'];

                if (doNotShow.indexOf(code) === -1) {
                  return code.split('-')[1];
                }
              },
              offsets: function(code){
                return {
                  '公猪站': [80, 0],'分娩舍': [0, -110],'配怀舍': [0, 110],'后备舍': [110, -50],'隔离舍': [120, 0],'分娩舍2': [0, -40],'配怀2': [0, -40],'配怀舍': [0, 110],'配怀舍': [0, 110]
                }[code.split('-')[1]];
              }
            }
        },
		regionLabelStyle:
		{
		  initial: {
			'font-family': 'Microsoft Yahei',
					'font-size': '16',
					cursor: 'default',
					fill: '#fff',
					'font-weight': 'normal'
		  },
		  hover: {
			cursor: 'pointer'
		  }
		}
      });
	  
	  //启动定时加载
	  setInterval(function () {
	    if(select_rid){
			loadHouse(select_rid);
		}
	  },1000*{$intval});
	
    });
	
	
	
	var select_rid=null;
	
	function jump(){
		exitFull();
		if(select_rid){
			var urlhouse='{:u('Index/house')}';
			window.location.href= urlhouse+"?rid="+select_rid;
		}
	}
	
	function loadHouse(rid){
		$.ajax({
		  type: 'POST',
		  url: "{:u('Index/loadHouse820410Status')}",
		  data: {rid:rid},
		  success: function(data){
			var htmlstr='';
			console.info(data);
			if(data){
				if(data.temp_r){
					if(!isNaN(data.pc_wind)){
						htmlstr+="<div class='col-xs-12'><small>变频风机开启 "+data.pc_wind +"%</small><div class='progress progress-xs'><div style='width: "+data.pc_wind +"%;' class='progress-bar progress-bar-success'></div></div></div>";
					}
					if(!isNaN(data.pc_sidewin)){
						htmlstr+="<div class='col-xs-12'><small>侧风窗开启比例 "+data.pc_sidewin +"%</small><div class='progress progress-xs'><div style='width: "+data.pc_sidewin +"%;' class='progress-bar progress-bar-success'></div></div></div>";
					}
					if(!isNaN(data.pc_topwin)){
						htmlstr+="<div class='col-xs-12'><small>天花窗开启比例 "+data.pc_topwin +"%</small><div class='progress progress-xs'><div style='width: "+data.pc_topwin +"%;' class='progress-bar progress-bar-success'></div></div></div>";
					}
					if(!isNaN(data.pc_roller)){
						htmlstr+="<div class='col-xs-12'><small>卷帘开启比例 "+data.pc_roller +"%</small><div class='progress progress-xs'><div style='width: "+data.pc_roller +"%;' class='progress-bar progress-bar-success'></div></div></div>";
					}
					if(!isNaN(data.pc_slide)){
						htmlstr+="<div class='col-xs-12'><small>滑帘开启比例 "+data.pc_slide +"%</small><div class='progress progress-xs'><div style='width: "+data.pc_slide +"%;' class='progress-bar progress-bar-success'></div></div></div>";
					}
					if(!isNaN(data.pc_light)){
						htmlstr+="<div class='col-xs-12'><small>可调光照开启比例 "+data.pc_light +"%</small><div class='progress progress-xs'><div style='width: "+data.pc_light +"%;' class='progress-bar progress-bar-success'></div></div></div>";
					}
					var relaystate=data.relaystate;
					var relaystate_bin=parseInt(relaystate).toString(2);
					//relaystate_bin=relaystate_bin.split("").reverse().join("");
					if(data.type==='NM820'){
						relaystate_bin=prefixInteger(relaystate_bin,17).toString();
						relaystate_bin=relaystate_bin.split("").reverse().join("");
						for(var i=1;i<17;i++){
							if(relaystate_bin[i]=='0'){
								htmlstr+="<div class='col-xs-6'><span class='text-white font-thin h1 block'><i class='fa fa-asterisk'></i></span><span class='text-muted text-base'>风机"+(i).toString()+"</span></div>";
							}else{
								//htmlstr+="<span><i class='fa fa-2x fa-asterisk text-success'></i></span>";
								htmlstr+="<div class='col-xs-6'><span class='text-white font-thin h1 block'><i class='fa fa-asterisk text-success'></i></span><span class='text-success'>风机"+(i).toString()+"</span></div>";
							}
						}
					}else if(data.type==='NM410'){
						relaystate_bin=prefixInteger(relaystate_bin,9).toString();
						relaystate_bin=relaystate_bin.split("").reverse().join("");
						for(var i=1;i<9;i++){
							if(relaystate_bin[i]=='0'){
								htmlstr+="<div class='col-xs-6'><span class='text-white font-thin h1 block'><i class='fa fa-asterisk'></i></span><span class='text-muted text-base'>风机"+(i).toString()+"</span></div>";
							}else{
								//htmlstr+="<span><i class='fa fa-2x fa-asterisk text-success'></i></span>";
								htmlstr+="<div class='col-xs-6'><span class='text-white font-thin h1 block'><i class='fa fa-asterisk text-success'></i></span><span class='text-success'>风机"+(i).toString()+"</span></div>";
							}
						}
					}
					
					
					$('#id-status').html(htmlstr);
					
					
					$('#id-status-title').html(data.housename);
					$('#day').html(data.day);
					$('#temp_avg').html(data.temp_avg+' ℃');
					if(data.type==='NM820'){
						$('#light_r').html(data.light_r +' Lux');
						$('#nh3_r').html(data.nh3_r +' ppm');
						$('#light_r').show();
						$('#nh3_r').show();
					}else if(data.type==='NM410'){
						$('#nh3_r').html('N/A');
						$('#light_r').html('N/A');
						$('#nh3_r').hide();
						$('#light_r').hide();
					}
					$('#humi_r1').html(data.humi_r1 +' %Rh');
					
				}else{
					htmlstr+="";
					$('#id-status').html(htmlstr);
					$('#id-status-title').html('设备离线');
					$('#day').html('设备离线');
					$('#temp_avg').html('设备离线');
					$('#humi_r1').html('设备离线');
					$('#nh3_r').html('设备离线');
					$('#light_r').html('设备离线');
				}
			}else{
				htmlstr+="";
				$('#id-status').html(htmlstr);
				$('#id-status-title').html('设备离线');
				$('#day').html('设备离线');
				$('#temp_avg').html('设备离线');
				$('#humi_r1').html('设备离线');
				$('#nh3_r').html('设备离线');
				$('#light_r').html('设备离线');
			}
		  },
		  error: function (data) {
			console.info(data);
		  },
		  complete: function (XHR, TS) {
		  },
		  dataType: "json"
		});
		
		
		/*$.ajax({
		  type: 'POST',
		  url: "{:u('Index/loadHouseCalc')}",
		  data: {rid:rid},
		  success: function(data){
			var htmlstr='';
			if(data){

			}else{
			}
		  },
		  error: function (data) {
			console.info(data);
		  },
		  complete: function (XHR, TS) {
		  },
		  dataType: "json"
		});*/
	}
	
	
	function prefixInteger(num, n) {
		return (Array(n).join(0) + num).slice(-n);
	}
	
	function requestFullScreen(element) {
	  // 判断各种浏览器，找到正确的方法
	  var requestMethod = element.requestFullScreen || //W3C
	  element.webkitRequestFullScreen ||  //Chrome等
	  element.mozRequestFullScreen || //FireFox
	  element.msRequestFullScreen; //IE11
	  if (requestMethod) {
		requestMethod.call(element);
	  }
	  else if (typeof(window.ActiveXObject) !== "undefined") {
		//for Internet Explorer
		var wscript = new ActiveXObject("WScript.Shell");
		if (wscript !== null) {
		  wscript.SendKeys("{F11}");
		}
	  }
	}
	
	function exitFull() {
	  // 判断各种浏览器，找到正确的方法
	  var exitMethod = document.exitFullscreen || //W3C
	  document.mozCancelFullScreen ||  //Chrome等
	  document.webkitExitFullscreen || //FireFox
	  document.webkitExitFullscreen; //IE11
	  if (exitMethod) {
		exitMethod.call(document);
	  }
	  else if (typeof(window.ActiveXObject) !== "undefined") {
		//for Internet Explorer
		var wscript = new ActiveXObject("WScript.Shell");
		if (wscript !== null) {
		  wscript.SendKeys("{F11}");
		}
	  }
	}
	
	function reset(element){
		var cls=($('#id-reset-screen').html());
		console.info(element);
		if(cls==='全屏'){
			//fullsize
			requestFullScreen(element);
			$('#id-reset-screen').html('取消全屏');
		}else{
			exitFull();
			$('#id-reset-screen').html('全屏');
		}
	}
	
  </script>
</head>
<body>
<div class="hbox hbox-auto-xs ">
	<div class="col item">
		<div id="map1"  class="h-full" style="height: 100%;  width: 100%;  position: absolute;  top: 0px;  bottom: 0px;z-index: 0;overflow:hidden; word-break:break-all;    background-image: url('__PUBLIC__/img/farm-bg.jpg');background-size:100% 100%;"></div>
		
		<div id="id-box" class="top text-white" style="top:20px;left:60px;display:none;">
		  <div class="panel w-xl no-bg b-monitor">
			<div class="panel-heading">
			  <a href class="pull-right">
				<i class="fa fa-angle-up text"></i>
				<i class="fa fa-angle-down text-active"></i>
			  </a>
			  <span>监控现况</span>
			</div>
			<div collapse="isCollapsed">
			  <div class="panel-body bg-monitor b-monitor">
				<div class="scrollable1" style="max-height:110px" >
					<p>当前天龄  <span id="day" class="text-warning"></span></p>
					<p>舍内温度  <span id="temp_avg" class="text-success"></span></p>
					<p>舍内湿度  <span id="humi_r1" class="text-success"></span></p>
					<p>氨气浓度  <span id="nh3_r" class="text-success"></span></p>
					<p>光照强度  <span id="light_r" class="text-success"></span></p>
				</div>
			  </div>

			</div>
		  </div>
		</div>
	
		<div class="bottom text-right w-full wrapper-lg" >
		  <div id='id-farm-status' class=" b-monitor text-white" style="padding-right: 320px;">
				<i class="fa fa-circle text-success m-r-xs m-l"></i>
				<span class="m-r-xs">正常</span><span class="text-2x font-thin num-style">2</span>
				<i class="fa fa-circle text-warning m-r-xs m-l"></i>
				<span class="m-r-xs">空栏</span><span class="text-2x font-thin num-style">0</span>
				<i class="fa fa-circle text-danger m-r-xs m-l"></i>
				<span class="m-r-xs">预警</span><span class="text-2x font-thin num-style">0</span>
				<i class="fa fa-circle text-muted m-r-xs m-l">
				</i><span class="m-r-xs">离线</span><span class="text-2x font-thin num-style">0</span>
		  </div>
		</div>
	
	</div>
</div>

<div class="app-aside-right pos-fix no-padder m w-md w-auto-xs text-white b-l animated fadeInRight">
  <div class="vbox">
    <div id="id-status-title" class="wrapper b-b b-light">状态</div>
    <div class="row-row">
      <div class="cell scrollable hover">
        <div class="cell-inner">
          <div id="id-status" class="wrapper-md">

          </div>
        </div>
      </div>
    </div>
    <div class="wrapper b-t b-light text-center">
      <!-- <p>Footer with fluid height</p> -->
      <a href="#" class="btn btn-info" onclick="jump();">详细</a>
	  <a id='id-reset-screen' class="btn btn-info" href="#" onClick="reset(document.documentElement)">全屏</a>
    </div>
  </div>
</div>

</body>
</html>